const TEMPLATES = {
    index: {
        'header':
            '<tr>\n' +
            '    <td>${key}</td>\n' +
            '    <td>${value}</td>\n' +
            '</tr>',
        'http-headers':
            '<div class="line">\n' +
            '    <span class="gateway-label">应答头: </span>\n' +
            '    <table class="http-headers">\n' +
            '        <tr>\n' +
            '            <td class="http-header-name">名称</td>\n' +
            '            <td class="http-header-value">值</td>\n' +
            '        </tr>\n' +
            '        ${headers}\n' +
            '    </table>\n' +
            '</div>',
        'dummy-interface':
            '<li class="gateway-item flexable" data-uri="${uri}">\n' +
            '    <div class="gateway-method flexable gwm-${method}">${method}</div>\n' +
            '    <div class="auto-grow column-mode padding-15">\n' +
            '        <div class="flexable">\n' +
            '            <div class="gateway-name auto-grow">${name}</div>\n' +
            '            <div>\n' +
            '                <a class="inline-button copyable" data-role="copy" title="Copy URI" data-clipboard-text="${uri}">\n' +
            '                    <i class="fa fa-fw fa-copy"></i>\n' +
            '                </a>\n' +
            '                <a class="inline-button clickable" data-role="edit" title="Edit">\n' +
            '                    <i class="fa fa-fw fa-edit"></i>\n' +
            '                </a>\n' +
            '                <a class="inline-button clickable" data-role="delete" title="Remove">\n' +
            '                    <i class="fa fa-fw fa-trash"></i>\n' +
            '                </a>\n' +
            '                <a class="inline-button clickable" data-role="call" title="Try Me">\n' +
            '                    <i class="fa fa-fw fa-play"></i>\n' +
            '                </a>\n' +
            '                <a class="inline-button" data-role="history" title="Show History" href="request-logs.html?if-id=${id}">\n' +
            '                    <i class="fa fa-fw fa-history"></i>\n' +
            '                </a>\n' +
            '                <a class="inline-button clickable" data-role="show-more" title="Show Detail">\n' +
            '                    <i class="fa fa-fw fa-angle-double-right"></i>\n' +
            '                </a>\n' +
            '            </div>\n' +
            '        </div>\n' +
            '        <div class="flexable">\n' +
            '            <div class="line">\n' +
            '                <span class="gateway-label">请求路径: </span>\n' +
            '                <span class="gateway-uri">${uri}</span>\n' +
            '            </div>\n' +
            '        </div>\n' +
            '        <div class="collapsable collapsed">' +
            '        ${httpHeaders}\n' +
            '        <div class="flexable">\n' +
            '            <div class="auto-grow column-mode left-panel">\n' +
            '                <div class="line">\n' +
            '                    <span class="gateway-label">应答类型: </span>\n' +
            '                    <span class="gateway-return-type">${contentType}</span>\n' +
            '                </div>\n' +
            '                <div class="gateway-value">\n' +
            '                    <span class="gateway-label">返回值模板: </span>\n' +
            '                    <pre>${value}</pre>\n' +
            '                </div>\n' +
            '            </div>\n' +
            '            <div class="auto-grow column-mode right-panel">\n' +
            '                <div class="line">\n' +
            '                    <span class="gateway-label">应答码: </span>\n' +
            '                    <span class="gateway-code">${code}</span>\n' +
            '                </div>\n' +
            '                <div class="form-text text-muted">备注: ${remark}</div>\n' +
            '            </div>\n' +
            '        </div>\n' +
            '        </div>' +
            '    </div>\n' +
            '</li>'
    }
}, Template = {
    replace : function (bean, template) {
        return template.replace (/\$\{(.*?)}/g, name => {
            name = name.substring (2, name.length - 1);
            if (name in bean) {
                return bean [name];
            }
            return name;
        });
    },
    build : function (bean, template) {
        return $(this.replace (bean, template));
    }
}